<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-CDN演示</title>
    <!--引入Element Plus CSS-->
    <link rel="stylesheet" href="css/element-plus.css" />
</head>

<body>
    <div id="app">
        <h1>计数：{{num}}</h1>
        <div>
            <el-menu class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">电视剧</el-menu-item>
                <el-menu-item index="3">电影</el-menu-item>
                <el-menu-item index="4">体育</el-menu-item>
                <el-menu-item index="5">动漫</el-menu-item>
                <el-menu-item index="6">音乐</el-menu-item>
            </el-menu>
        </div>
    </div>
</body>

</html>

<!----------------引入JS ------------------>
<!-- 引入Vue3的JS文件 -->
<script src="js/vue3.js"></script>
<!-- 引入Element Plus的JS文件 -->
<script src="//unpkg.com/element-plus"></script>
<script>
    // 定义一个对象
    const Counter = {
        data() {
            return {
                num: 100
            }
        }
    }

    // 实例化一个Vue3的对象
    const app = Vue.createApp(Counter);
    // 使用ElmentPlus的UI并且绑定在app的容器上
    app.use(ElementPlus).mount('#app')

</script>